<template>
  <!-- 面试技巧 -->
  <div class="interview">
    <div class="content " v-for="(item, index) in technicList" :key="index">
      <!-- 左 -->
      <div class="content_left" @click="technicDetail(item.id)">
        <div class="content_title">{{ item.title }}</div>

        <div class="content_btm">
          <div class="left">
            {{ item.created_at | formaTime }}
          </div>
          <div class="right">
            <div class="see">
              <i class="iconfont iconicon_liulanliang"></i>
              <span>{{ item.read }}</span>
            </div>
            <div class="like">
              <i class="iconfont iconicon_dianzanliang"></i>
              <span>{{ item.star }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 右 -->
      <div class="img_right">
        <img :src="item.cover" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { articlesTechnic } from '@/api/api.js'
import moment from 'moment'
export default {
  data () {
    return {
      technicList: []
    }
  },
  methods: {
    technicDetail (id) {
      this.$router.push(`/technicDetail/${id}`)
    }
  },
  created () {
    articlesTechnic({ limit: 3 }).then(res => {
      res.data.list.forEach(val => {
        if (val.cover) {
          val.cover = process.env.VUE_APP_URL + val.cover
        }
      })
      // 保存
      this.technicList = res.data.list
    })
  },
  filters: {
    formaTime (val) {
      return moment(val).format('YYYY-MM-DD')
    }
  }
}
</script>

<style lang="less" scoped>
.interview {
  border-bottom: 10px solid #f9f9f9;
  .content {
    display: flex;
    padding: 0 15px;
    margin-top: 20px;
    .content_left {
      flex: 9;
      margin-right: 15px;
      .content_title {
        font-size: 17px;
        color: #000;
        margin-bottom: 25px;
      }
      .content_btm {
        display: flex;
        font-size: 12px;
        line-height: 18px;
        align-items: center;
        color: #b4b4bd;
        .left {
          flex: 1;
        }
        .right {
          display: flex;
          flex: 1;
          .see,
          .like {
            position: relative;
            flex: 1;
            text-align: center;
            i {
              position: absolute;
              top: 0;
              left: 0;
            }
            .iconicon_dianzanliang {
              position: absolute;
              top: 0;
              left: 0;
              padding-left: 20px;
            }
          }
          .like {
            flex: 1;
            text-align: right;
          }
        }
      }
    }
    .img_right {
      flex: 5;
      img {
        width: 100%;
        height: 80px;
        border-radius: 5px;
      }
    }
  }
  /deep/.van-cell::after {
    border: 0;
  }
}
</style>
